<!DOCTYPE html>
<html>
<head>
    <title>接口示例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .text-center {
            text-align: center;
        }

        [v-cloak] {
            display: none;
        }

        #app, .btns {
            padding: 10px;
        }

        .btns .btn {
            margin-left: 5px;
        }

        .tab-content {
            padding: 10px 0px;
        }

        .menus {
            /*border: 1px solid #ddd;
            border-bottom: none;*/
        }

        .menus ul {
            padding: 0px;
            margin: 0px;
            margin-left: 15px;
        }

        .menus ul li {
            list-style-type: none;
            position: relative;
            display: block;
        }

        .menus ul li a {
            display: block;
            padding-top: 15px;
            /*border-bottom: 1px solid #ddd;*/
            background-color: #fff;
            text-decoration: none;
        }

        .menus ul li a:hover {
            text-decoration: none;
        }

        .menus .menus-level1 {
            margin-left: 0px;
        }
        #result th{
            min-width: 50px;
        }
        #result .result-info{
            min-width: 300px;
        }
        #result .result-value{
            max-width: 500px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }

    </style>
</head>
<body>
<div id="app" v-cloak>
    <div class="row">
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
            <div class="input-group">
                <input @keydown.enter="search"
                       @keyup="waitSearch"
                       v-model="keywords_back"
                       type="text"
                       name="keywords"
                       class="form-control"
                       placeholder="菜单搜索">
                <span class="input-group-btn">
                    <button @click="search" type="button" class="btn btn-flat">
                        <i class="fa fa-search"></i>
                    </button>
                    <button @click="getMenus" type="button" class="btn btn-flat">
                        <i class="fa fa-refresh"></i>
                    </button>
                </span>
            </div>
            <div class="menus">
                <menus :menus="tree_menus" class="menus-level1"></menus>
            </div>
        </div>
        <div class="col-lg-10 col-md-9 col-sm-8 col-xs-12">
            <h1 class="text-center">欢迎使用接口测试工具</h1>
            <div id="content" v-if="api">
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <h4>接口名称:{{api._trans_name || api.name}}</h4>
                        <p>
                            <strong>API请求地址:</strong>{{api.url}}
                        </p>
                        <p v-if="api.route_params && api.route_params.length">
                            <strong>当前路由地址:</strong>{{api_url_parm}}
                        </p>
                        <p>
                            <strong>提交类型:</strong>
                            <label v-for="(method,key) in map_use_method">
                                <input name="method" type="radio" :value="method" v-model="api.use_method">
                                {{method}}
                            </label>
                        </p>

                        <p>
                            <strong>描述:</strong>
                            {{api._trans_description || api.description}}
                        </p>
                    </div>
                    <!--    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <div class="form-group" v-for="(header,index) in common_headers">
                            <label>{{header.name}}</label>
                            <input type="text" class="form-control" v-model="header.example" :placeholder="header.title">
                        </div>
                    </div>-->
                </div>
                <ul class="nav nav-tabs">
                    <li :class="{'active':select==2}" @click="select=2" v-if="api.route_params && api.route_params.length">
                        <a href="javascript:void(0)">路由参数</a>
                    </li>
                    <li :class="{'active':select==0}" @click="select=0">
                        <a href="javascript:void(0)">URL请求参数</a>
                    </li>
                    <li :class="{'active':select==1}" @click="select=1" v-show="api.use_method!='get'">
                        <a href="javascript:void(0)">body提交参数</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane" :class="{active:select==2}" v-if="api.route_params && api.route_params.length">
                        <table class="table table-hover table-bordered">
                            <tbody>
                            <tr>
                                <th>名称</th>
                                <th>参数变量名</th>
                                <th>参数值</th>
                                <th>类型</th>
                                <th>描述</th>
                            </tr>
                            <tr v-for="(param,index) in api.route_params" v-if="api.route_params.length">
                                <td>{{param.title || '自定义变量'}}</td>
                                <td>
                                    <input v-model="param.name" :disabled="!param.enable" type="text"
                                           class="form-control" placeholder="键">
                                </td>
                                <td><input v-model="param.example" type="text" placeholder="值" class="form-control">
                                </td>
                                <td>{{array_get(maps.params.type,param.type,'')}}</td>
                                <td>
                                    <span v-show="param.validate">{{param.validate}}</span>
                                    <p v-show="param.description">{{param.description}}</p>
                                </td>
                            </tr>
                            <tr v-else>
                                <td colspan="5" class="text-center">
                                    暂无参数
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="btns">
                            <button class="btn btn-default" @click="addPostParam">添加参数</button>
                            <button class="btn btn-default" @click="emptyPostParams">置空</button>
                            <button class="btn btn-default" @click="reset">重置</button>
                            <button class="btn btn-default" @click="submit">提交</button>
                        </div>
                    </div>
                    <div class="tab-pane" :class="{active:select==0}">
                        <table class="table table-hover table-bordered">
                            <tbody>
                            <tr>
                                <th>名称</th>
                                <th>参数变量名</th>
                                <th>参数值</th>
                                <th>类型</th>
                                <th>描述</th>
                            </tr>
                            <tr v-for="(param,index) in api.params" v-if="api.params && api.params.length">
                                <td>{{param.title || '自定义变量'}}</td>
                                <td>
                                    <input v-model="param.name" :disabled="!param.enable" type="text"
                                           class="form-control" placeholder="键">
                                </td>
                                <td><input v-model="param.example" type="text" placeholder="值" class="form-control">
                                </td>
                                <td>{{array_get(maps.params.type,param.type,'')}}</td>
                                <td>
                                    <span v-show="param.validate">{{param.validate}}</span>
                                    <p v-show="param.description">{{param.description}}</p>
                                </td>
                            </tr>
                            <tr v-else>
                                <td colspan="5" class="text-center">
                                    暂无参数
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <br/>
                        <div class="btns">
                            <button class="btn btn-default" @click="addParam">添加参数</button>
                            <button class="btn btn-default" @click="empty">置空</button>
                            <button class="btn btn-default" @click="reset">重置</button>
                            <button class="btn btn-default" @click="submit">提交</button>
                        </div>
                    </div>
                    <div class="tab-pane" :class="{active:select==1}">
                        <table class="table table-hover table-bordered">
                            <tbody>
                            <tr>
                                <th>名称</th>
                                <th>参数变量名</th>
                                <th>参数值</th>
                                <th>类型</th>
                                <th>描述</th>
                            </tr>
                            <tr v-for="(param,index) in api.body_params"
                                v-if="api.body_params && api.body_params.length">
                                <td>{{param.title || '自定义变量'}}</td>
                                <td>
                                    <input v-model="param.name" :disabled="!param.enable" type="text"
                                           class="form-control" placeholder="键">
                                </td>
                                <td><input v-model="param.example" type="text" placeholder="值" class="form-control">
                                </td>
                                <td>{{array_get(maps.params.type,param.type,'')}}</td>
                                <td>
                                    <span v-show="param.validate">{{param.validate}}</span>
                                    <p v-show="param.description">{{param.description}}</p>
                                </td>
                            </tr>
                            <tr v-else>
                                <td colspan="5" class="text-center">
                                    暂无参数
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="btns">
                            <button class="btn btn-default" @click="addPostParam">添加参数</button>
                            <button class="btn btn-default" @click="emptyPostParams">置空</button>
                            <button class="btn btn-default" @click="reset">重置</button>
                            <button class="btn btn-default" @click="submit">提交</button>
                        </div>
                    </div>
                </div>
                <p>
                    <b>响应说明:</b>　
                    <button class="btn btn-default" @click="look">查看</button>
                </p>
                <div id="result" v-show="result.status">
                    响应状态码:{{result.status}}
                    <table class="table table-hover table-bordered">
                        <tr>
                            <th>属性</th>
                            <th>层级</th>
                            <th>类型</th>
                            <th class="result-info">说明</th>
                            <th class="result-value">值</th>
                        </tr>
                        <tr v-for="(row,key) in result_array" v-if="result_array.length">
                            <td>{{deep(row.deep)}}{{row.k}}</td>
                            <td>{{row.deep-1}}</td>
                            <td>{{row.type}}</td>
                            <td class="result-info">{{try_array_get(result_info,row.key,'')}}</td>
                            <td class="result-value">{{row.value}}</td>
                        </tr>
                        <tr v-else>
                            <td colspan="5">暂无数据</td>
                        </tr>
                    </table>
                </div>
                <form ref="form" v-show="false" :action="form_api_url" target="_blank"
                      :method="api.use_method=='get'?'get':'post'">
                    <div ref="metas">
                        <meta :name="key" :content="header" v-for="(header,key) in headers"/>
                    </div>
                    <input type="hidden" name="json" value="1">
                    <input type="hidden" :name="key" :value="param" v-for="(param,key) in body_params">
                    <div v-if="['get','post'].indexOf(api.use_method)==-1">
                        <input type="hidden" name="_method" :value="api.use_method.toUpperCase()">
                    </div>
                </form>
            </div>
        </div>
    </div>


</div>
<script type="text/x-template" id="menus">
    <ul>
        <li v-for="(menu,index) in items">
            <a href="javascript:void(0)" @click="switchItem(menu)">
                <span @click="selectItem(menu)">{{menu._trans_name || menu.name}}</span>
                <i class="fa pull-right"
                   :class="menu.active?'fa-angle-down':'fa-angle-left'"
                   v-if="menu.childrens && menu.childrens.length">
                </i>
            </a>
            <menus
                v-if="menu.childrens && menu.childrens.length && menu.active"
                :menus="menu.childrens">
            </menus>
        </li>
    </ul>
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/collect.js/4.28.7/collect.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.min.js"></script>
<script src="https://unpkg.com/vue@next"></script>
<script src="/web-api/open/config?script=AppConfig" type="application/javascript"></script>
<script src="./index.js"></script>
</body>
</html>
